<template>
    <div class="container">
        <div class="control">
            <el-radio-group v-model="type">
                <el-radio-button label="画笔" value="1" />
                <el-radio-button label="矩形" value="2" />
                <el-radio-button label="圆形" value="3" />
            </el-radio-group>
            <label class="control_label">颜色：</label>
            <el-color-picker v-model="strokeStyle" @change="ctx.strokeStyle = strokeStyle"></el-color-picker>
            <label class="control_label">宽度：</label>
            <el-select v-model="lineWidth" class="control_line_width" @change="ctx.lineWidth = lineWidth">
                <el-option v-for="item in 10" :key="item" :label="item + 'px'" :value="item" />
            </el-select>
            <el-button class="control_save" @click="save()" type="success">保存</el-button>
            <el-button @click="clear()" type="danger">清空</el-button>
        </div>
        <canvas
            class="canvas"
            ref="canvas"
            width="720"
            height="540"
            @mousedown="mouseDown"
            @mousemove="mouseMove"
            @mouseout="mouseUp"
            @mouseup="mouseUp"
        >
        </canvas>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from "vue";

const canvas = ref<HTMLCanvasElement>();
const type = ref(1);
const strokeStyle = ref("#000");
const lineWidth = ref(3);
let ctx: CanvasRenderingContext2D = null;
let beginX = 0;
let beginY = 0;
let isDown = false;
let imageData: ImageData = null;

// 初始化
onMounted(() => {
    ctx = canvas.value.getContext("2d");
    // 设置描边样式
    ctx.lineWidth = lineWidth.value;
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
});
// 鼠标按下
function mouseDown(e: MouseEvent) {
    isDown = true;
    ctx.beginPath();
    // 保存按下的坐标
    beginX = e.offsetX;
    beginY = e.offsetY;
}
// 鼠标移动
function mouseMove(e: MouseEvent) {
    if (!isDown) return;
    // 画笔
    if (type.value == 1) {
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.stroke();
    }
    // 矩形
    if (type.value == 2) {
        ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
        imageData && ctx.putImageData(imageData, 0, 0, 0, 0, canvas.value.width, canvas.value.height);
        ctx.beginPath();
        ctx.rect(beginX, beginY, e.offsetX - beginX, e.offsetY - beginY);
        ctx.stroke();
        ctx.closePath();
    }
    // 圆形
    if (type.value == 3) {
        ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
        imageData && ctx.putImageData(imageData, 0, 0, 0, 0, canvas.value.width, canvas.value.height);
        ctx.beginPath();
        // 根据勾股定理计算圆的半径
        let radius = Math.round(Math.sqrt(Math.pow(e.offsetX - beginX, 2) + Math.pow(e.offsetY - beginY, 2)));
        ctx.arc(beginX, beginY, radius, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.closePath();
    }
}
// 鼠标释放
function mouseUp() {
    isDown = false;
    ctx.closePath();
    // 保存画布数据
    imageData = ctx.getImageData(0, 0, canvas.value.width, canvas.value.height);
}

function clear() {
    imageData = null;
    ctx.clearRect(0, 0, canvas.value.width, canvas.value.height);
}
function save() {
    const a = document.createElement("a");
    a.download = "画板";
    a.href = canvas.value.toDataURL();
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
}
</script>
<style lang="scss" scoped src="./paint.scss"></style>
